<template>
  <div class="tc-container">
    xxxx智慧大屏
    <div class="btn-list">
      <div class="layers">
        <div
          :class="{ 'layer-btn': true, 'layer-btn-active': currentLayer == 1 }"
          @click="layerChange(1, 'charts')"
        >
          <img class="img" src="@/assets/images/icon/charts-icon.png" />
        </div>
        <div
          :class="{ 'layer-btn': true, 'layer-btn-active': currentLayer == 2 }"
          @click="layerChange(2, 'model')"
        >
          <img class="img" src="@/assets/images/icon/model-icon.png" />
        </div>
        <div
          :class="{ 'layer-btn': true, 'layer-btn-active': currentLayer == 3 }"
          @click="layerChange(3, 'map')"
        >
          <img class="img" src="@/assets/images/icon/map-icon.png" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const currentLayer = ref(1)
const router = useRouter()
const layerChange = (id, layer) => {
  router.replace(`/${layer}`)
  currentLayer.value = id
}
</script>
<style scoped lang="scss">
.tc-container {
  width: 100%;
  height: vh(80);
  position: absolute;
  z-index: 2;
  background: url('@/assets/images/headerbg.png');
  background-size: 100% 100%;
  font-size: 40px;
  font-weight: 600;
  color: #fff;
  line-height: vh(80);
  text-align: center;
  letter-spacing: 1rem;
}
.btn-list {
  height: 100%;
  position: absolute;
  right: vw(10);
  top: 0;
  display: flex;
  align-items: center;
}
.layers {
  height: vh(50);
  border: 2px solid rgba(16, 173, 168, 0.34);
  border-radius: 5px;
  padding: 0 vh(20);
  display: flex;
  align-items: center;
  gap: 0 vh(20);
  .layer-btn {
    width: vw(30);
    height: vw(30);
    background-color: rgba(16, 173, 168, 0.34);
    border-radius: vw(15);
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .layer-btn-active {
    background-color: rgba(16, 173, 168, 0.639);
  }
  .img {
    width: vw(20);
    height: vw(20);
  }
}
</style>
